<template>
	<view style="width: 100%;">
		<!-- 底部tab -->
		<view class="tab">
			<view class="tab__content" @click="changOrder(0)">
				<image class="tab__content__img" v-if="is_order_food" src="/static/icon/order_food.png" mode=""></image>
				<image class="tab__content__img" v-if="!is_order_food" src="/static/icon/order_food_active.png" mode=""></image>
				<text class="tab__content__text" :style="!is_order_food?'color: rgba(49,114,182,1);':'color: #000000;'">点餐</text>
			</view>
			<view class="tab__content" @click="changOrder(1)">
				<image class="tab__content__img" v-if="!is_order_food" src="/static/icon/order_icon.png" mode=""></image>
				<image class="tab__content__img" v-if="is_order_food" src="/static/icon/order_icon_active.png" mode=""></image>
				<text class="tab__content__text" :style="is_order_food?'color: rgba(49,114,182,1);':'color: #000000;'">订单</text>
			</view>
		</view>
		<!-- 点餐内容 -->
		<view class="food" v-if="!is_order_food">
			<view class="food__box">
				<scroll-view class="food__box__scroll-list" scroll-y scroll-with-animation>
					<view class="food__box__scroll-list__left-tab" :class="index==tab_cur?'text-blue cur':'text-grey'" v-for="(item,index) in tab_list" :key="index" :data-id="index" @tap="TabSelect($event,index)">
						{{item.cateName}}
						<view class="food__box__scroll-list__left-tab__tie" v-if="item.num != 0">{{item.num<=99?item.num:'99+'}}</view>
					</view>
				</scroll-view>
				<scroll-view class="food__box__scroll-content" scroll-y scroll-with-animation>
					<view class="food__box__scroll-content__all" v-for="(item, listIndex) in cope_content_list" :key="listIndex">
						<image class="food__box__scroll-content__all__img" :src="item.foodImg" mode="aspectFill"></image>
						<view class="food__box__scroll-content__all__info">
							<view class="food__box__scroll-content__all__info__name">{{item.foodName}}</view>
							<view class="food__box__scroll-content__all__info__title">{{item.foodInfo}}</view>
							<view class="food__box__scroll-content__all__info__num">剩余数量:&nbsp{{item.foodNumber}}</view>
							<view class="food__box__scroll-content__all__info__price">￥{{item.foodPrice}}</view>
						</view>
						<view class="food__box__scroll-content__all__bus">
							<view class="food__box__scroll-content__all__bus__left" @click="minusContentList(listIndex)">
								<image class="food__box__scroll-content__all__bus__left__img" src="/static/icon/minus.png" mode=""></image>
							</view>
							<view class="food__box__scroll-content__all__bus__in">
								<text class="food__box__scroll-content__all__bus__in__num">{{item.num}}</text>
							</view>
							<view class="food__box__scroll-content__all__bus__right" @click="addContentList(listIndex)">
								<image class="food__box__scroll-content__all__bus__right__img" src="/static/icon/add_icon.png" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottom">
				<view class="bottom__left">
					<text class="bottom__left__text">{{price < 1000?'总计:&nbsp&nbsp&nbsp'+price+'元':'总计:&nbsp&nbsp&nbsp999+元'}}</text>
				</view>
				<view class="bottom__right" @click="goOrder">
					下单
					<view class="bottom__right__text" v-if="total">{{total <= 99?total:'99+'}}</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="order-tab" v-if="is_order_food">
			<view class="order-tab__box" v-for="(item, index) in order_tab" :key="index" @click="changeOrderTab(index)">
				<text class="order-tab__box__text">{{item.name}}</text>
				<view class="order-tab__box__logo" :style="is_order_tab == index?'background-color: rgba(49,114,182,1);':'background-color: #FFFFFF;'"></view>
			</view>
		</view>
		<scroll-view v-if="is_order_food" class="scroll-order" scroll-y scroll-with-animation refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="triggered" @scrolltolower="scrolltolower">
			<view class="scroll-order__box">
				<!-- 列表 -->
				<view class="scroll-order__box__content" @click="goFoodDetail(item)" v-for="(item,index) in old_list" :key="index">
					<view class="scroll-order__box__content__time">
						{{item.createTime}}
						<view class="scroll-order__box__content__status" :class="item.orderStatus == 0?'color-bule':(item.orderStatus == 1|| item.orderStatus == 2)?'color-green':'color-red'">{{item.orderStatus == 0?'待接受':item.orderStatus == 1?'已接受':item.orderStatus == 2?'已完成':item.orderStatus == 3?'已取消':'已拒绝'}}</view>
					</view>
					<view class="scroll-order__box__content__info ">
						<view class="scroll-order__box__content__info__img" v-if="img_index<3" v-for="(img_item,img_index) in item.appFoodOrderListList" :key="img_index">
							<image class="scroll-order__box__content__info__img__logo" :src="img_item.foodImg" mode="aspectFill"></image>
							<view class="scroll-order__box__content__info__img__title">{{img_item.foodName}}</view>
						</view>
					</view>
					<view class="scroll-order__box__content__zong" :style="is_order_tab == 1?'border-bottom: 2rpx solid rgba(248,248,248,1);':''">
						<view class="scroll-order__box__content__zong__box">
							<text class="scroll-order__box__content__zong__box__title">共{{item.orderFoodNum}}件</text>
							<text class="scroll-order__box__content__zong__box__text">实际付款&nbsp&nbsp&nbsp￥{{item.orderPrice}}</text>
						</view>
					</view>
					<view class="scroll-order__box__content__resver">
						<view class="scroll-order__box__content__resver__title" :style="item.orderStatus == 0?'right: 236rpx;':'right: 6rpx;'">
							查看详情
						</view>
						<view class="scroll-order__box__content__resver__text" v-if="item.orderStatus == 0" @click.stop="ThisOrder(item.id)">
							取消订单
						</view>
					</view>
				</view>
				<view class="scroll-order__box__no" v-if="!old_list.length">
					暂无订单
				</view>
			</view>
		</scroll-view>
		<!-- 下单 -->
		<view class="unorder-box" v-if="is_order">
			<view class="unorder-box__content">
				<view class="unorder-box__content__title">
					确认下单
				</view> 
				<view class="unorder-box__content__text">
					添加备注:
				</view> 
				<view class="unorder-box__content__area">
					<textarea class="unorder-box__content__area__text" type="text" v-model="order_info" placeholder="请输入..."/>
				</view> 
				<view class="unorder-box__content__button">
					<view class="unorder-box__content__button__no" @click="unOrder">取消</view>
					<view class="unorder-box__content__button__yes" @click="yesOrder">确定</view>
				</view>
			</view>
		</view>
		<!-- 取消下单 -->
		<view class="up-order-box" v-if="is_this_order">
			<view class="up-order-box__content">
				<view class="up-order-box__content__title">
					是否确定取消订单
				</view>
				<view class="up-order-box__content__button">
					<view class="up-order-box__content__button__no" @click="unThisOrder">取消</view>
					<view class="up-order-box__content__button__yes" @click="yesThisOrder">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				is_order_food: 0, //底部tab选中
				tab_list: [], //左边的导航栏列表
				tab_index: 0, //左边的导航栏索引值
				tab_cur: 0, //菜品左部tab选中
				content_list: [], //菜品
				cope_content_list: [], 
				total: 0, //总数 
				price: 0, //总价
				order_info: '', //下单备注
				this_order_id: '',  //取消订单id
				this_order_info: '', //取消订单备注
				order_tab: [
					{id:0,name:"全部",},
					{id:1,name:"待完成",},
					{id:2,name:"已完成",},
					{id:3,name:"已取消",},
				], //订单tab
				is_order_tab: 0, //订单顶部tab选中
				is_order:false,  //下单弹窗
				is_this_order: false,  //取消订单弹窗
				old_list: [], //订单显示列表
				old_lists: [], //订单总列表
				pageNo: 1, //订单分页
				order_tab_index: 0,   //订单分类id
				freshing: false, //下拉刷新靠件
				triggered: false, //下拉刷新靠件
			}
		},
		mounted() {
			let self = this
			self.freshing = false;
			self.init()
			self.getFoodOrder()
			uni.$on('food_order', function() {
				self.getFoodOrder()
				self.is_order_tab = 0
			})
		},
		methods: {
			/**
			 * @name 初始化
			 */
			async init() {
				await this.getCateList() ? this.getFoodList() : '';
			},
			/**
			 * @name 获取餐品类型
			 */
			getCateList() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$api.fAppFoodCateList({
						pageNo: 1,
						pageSize: 999,
					}).then((res) => {
						self.tab_list = res.data.result.records
						self.tab_list.forEach(val => {
							self.$set(val, 'num', 0)
						})
						resolve(true)
					})
				})
			},
			/**
			 * @name 获取餐点
			 */
			getFoodList() {
				let self = this
				self.$api.fAppFoodFoodList({
					cateId: '',
					pageNo: 1,
					pageSize: 999,
				}).then((res) => {
					self.content_list = res.data.result.records.filter(res=> res.foodStatus_dictText == '已上架')
					self.content_list.forEach(val => {
						self.$set(val, 'num', 0)
					})
					self.cope_content_list = self.content_list.filter(res => res.cateId == self.tab_list[0].id)
				})
			},
			/**
			 * @name 用户订单
			 */
			getFoodOrder() {
				let self = this
				self.$api.fAppFoodOrderList({
					pageNo: 1,
					pageSize: 999,
				}).then((res) => {
					self.old_lists = res.data.result.records
					self.old_lists.forEach(val => {
						let num = 0
						val.appFoodOrderListList.forEach(result1 => {
							num += result1.foodSize
						})
						self.$set(val, 'orderFoodNum', num)
					})
					console.log(self.old_lists);
					self.selectOrder(self.order_tab_index)
					
				})
			},
			/**
			 * @name 订单详情
			 * @param {Object} item 内容
			 */
			goFoodDetail:Debounce(
			function(item){
				uni.navigateTo({
					url:'/pages/orderFood/foodDetail/foodDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}),
			/**
			 * @name tab类型切换
			 * @param {type} index 
			 */
			changOrder(index) {
				console.log(index);
				this.is_order_food = index
				if(this.is_order_food == 0) {
					uni.setNavigationBarTitle({
						title:'点餐服务'
					})
				}
				if(this.is_order_food == 1) {
					uni.setNavigationBarTitle({
						title:'我的订单'
					})
				}
			},
			/**
			 * @name 菜品类型
			 * @param {type} event 事件
			 * @param {type} index 
			 */
			TabSelect(event,index) {
				this.tab_cur = event.target.dataset.id
				this.cope_content_list = this.content_list.filter(res => res.cateId == this.tab_list[index].id)
				this.tab_index = index
			},
			/**
			 * @name 点菜减少按钮
			 * @param {Object} index 序号
			 */
			minusContentList(index) {
				if(this.cope_content_list[index].num != 0) {
					this.cope_content_list[index].num --
					this.tab_list[this.tab_index].num --
					this.total --
					this.price = (Number(this.price) - Number(this.cope_content_list[index].foodPrice)).toFixed(2)
					if(this.price == 0) {this.price = 0}
					console.log(this.price);
					for(let i of this.content_list) {
						if(this.cope_content_list[index].id == i.id) {
							i.num = this.cope_content_list[index].num
						}
					}
				}
			}, 
			/**
			 * @name 点菜增加按钮
			 * @param {Object} index 序号
			 */
			addContentList(index) {
				if(this.cope_content_list[index].foodNumber != 0 && this.cope_content_list[index].num < this.cope_content_list[index].foodNumber) {
					this.cope_content_list[index].num ++
					this.total ++
					this.tab_list[this.tab_index].num ++
					this.price = (Number(this.price) + Number(this.cope_content_list[index].foodPrice)).toFixed(2)
					console.log(this.price);
					for(let i of this.content_list) {
						if(this.cope_content_list[index].id == i.id) {
							i.num = this.cope_content_list[index].num
						}
					}
				}else{
					uni.showToast({
						title:'菜品数量不足',
						icon:'none',
						duration:2000
					})
				}
			},
			/**
			 * @name 订单类型
			 * @param {Object} index 序号
			 */
			changeOrderTab(index) {
				this.order_tab_index = index
				this.selectOrder(index)
				this.is_order_tab = index
				console.log(this.old_list);
			},
			/**
			 * @name 下单弹框
			 */
			goOrder:Debounce(
			function(){
				let contentListNew = []
				contentListNew = this.content_list.filter(res => res.num != 0)
				if(contentListNew.length != 0) {
					this.is_order = !this.is_order
				}else{
					uni.showToast({
						title: '请添加物品',
						icon: 'none',
						duration: 2000
					})
				}
			}),
			/**
			 * @name 下单
			 */
			yesOrder:Debounce(
			function(){
				let self = this
				self.is_order = !self.is_order
				let foods = []
				self.content_list.forEach(res => {
					if(res.num != 0) {
						let item = {}
						item.id = res.id
						item.size = res.num
						foods.push(item)
					}
				})
				console.log(foods);
				//添加订单
				self.$api.fAppFoodOrderAdd({
					order_info:self.order_info,
					foods:foods
				}).then((res) => {
					setTimeout(function() {
						uni.showToast({
							title:'订单已生成',
							icon:'none',
							duration:2000
						})
					},400)
					self.content_list.forEach(res => {
						res.foodNumber = res.foodNumber - res.num
						res.num = 0
					})
					self.cope_content_list.forEach(res => {
						res.foodNumber = res.foodNumber - res.num
						res.num = 0
					})
					self.tab_list.forEach(res => {
						res.num = 0
					})
					self.price = 0
					self.total = 0
					self.order_info = ''
					self.getFoodOrder()
				}).catch(e=>{
					console.log(e);
				})
			}),
			/**
			 * @name 下单弹窗取消
			 */
			unOrder() {
				this.is_order = !this.is_order
				this.order_info = ''
			},
			/**
			 * @name 取消订单弹框
			 */
			ThisOrder:Debounce(
			function(id){
				this.this_order_id = id
				this.is_this_order = true
			}),
			/**
			 * @name 取消订单
			 */
			yesThisOrder() {
				let self = this
				self.is_this_order = !self.is_this_order
				self.$api.fAppFoodOrderCancel({
					id:self.this_order_id,
					orderCancelInfo:self.this_order_info
				}).then((res) => {
					console.log(res)
					setTimeout(function() {
						uni.showToast({
							title:'订单已取消',
							icon:'none',
							duration:2000
						})
					},400)
					self.this_order_id = ''
					self.this_order_info = ''
					self.getFoodList()
					self.getFoodOrder()
				}).catch(e=>{
					uni.showToast({
						title:'订单接口报错',
						icon:'none',
						duration:2000
					})
				})
			},
			/**
			 * @name 订单弹窗取消
			 */
			unThisOrder() {
				this.this_order_info = ''
				this.is_this_order = !this.is_this_order
			},
			/**
			 * @name 上拉加载
			 */
			scrolltolower() {
				let self = this
				self.pageNo ++
				self.$api.fAppFoodOrderList({
					pageNo: self.pageNo,
					pageSize: 999,
				}).then((res) => {
					if(res.data.result.records.length == 0) {
						self.pageNo --
					}else{
						self.old_lists = self.old_lists.concat(res.data.result.records)
						self.selectOrder(self.order_tab_index)
					}
				})
			},
			/**
			 * @name 下拉刷新
			 */
			onRefresh() {
				if (this.freshing) return;
				this.triggered = true;
				this.init()
				this.getFoodOrder()
				this.freshing = true;
				setTimeout(() => {
				    this.triggered = false;
				    this.freshing = false;
				}, 2000)
			},
			/**
			 * @name 筛选订单
			 */
			selectOrder(index) {
				switch (index) {
					case 0:
						this.old_list = this.old_lists
					break;
					case 1:
						this.old_list = this.old_lists.filter(res => res.orderStatus == 0)
					break;
					case 2:
						this.old_list = this.old_lists.filter(res => res.orderStatus == 2)
					break;
					case 3:
						this.old_list = this.old_lists.filter(res => res.orderStatus == 3)
					break;
				}
			},
		},
	}
</script>

<style scoped lang="less">
	.tab {
		width: 100%;height: 100rpx;border-top: 1rpx solid rgba(0,0,0,0.04);background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;position: fixed;bottom: 0;z-index: 99;
		&__content {
			width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;
			&__img {
				width: 66rpx;height: 66rpx;
			}
			&__text {
				font-size: 26rpx;
			}
		}
	}
	.food {
		width: 100%;height: 100vh;position: relative;
		&__box {
			width: 100%;display: flex;
			&__scroll-list {
				width: 160rpx;
				height:calc(100vh - 246rpx);
				background-color: rgba(248,248,248,1);
				&__left-tab {
					width: 100%;
					height: 120rpx;
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					&__tie {
						font-size: 24rpx;width: 38rpx;height: 38rpx;border-radius: 50%;background-color: #e12;color: #FFFFFF;display: flex;align-items: center;justify-content: center;position: absolute;top: 26rpx;left: 110rpx;
					}
				}
			}
			&__scroll-content {
				flex: 1;
				height:calc(100vh - 246rpx);
				background-color: #FFFFFF;
				&__all {
					width: 90%; height: 260rpx;display: flex;align-items: center;border-bottom: 2rpx solid rgba(248,248,248,1);position: relative;
					&__img {
						width: 200rpx;height: 200rpx;margin-left: 30rpx;
					}
					&__info {
						margin-left: 22rpx;width: 300rpx;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly;
						&__name {
							font-size: 30rpx;font-weight: 700;color: #000000;
						}
						&__title {
							font-size: 20rpx;color: #808080;display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
						}
						&__num {
							font-size: 20rpx;color: #808080;
						}
						&__price {
							font-size: 32rpx;color: #e12;width: 120rpx;height: 46rpx;border-radius: 23rpx;background-color: rgba(255,230,227,1);color: rgba(249,86,75,1);display: flex;align-items: center;justify-content: center;
						}
					}
					&__bus {
						display: flex;flex-direction: row;align-items: center;position: absolute;bottom: 24rpx;right: 2rpx;
						&__left {
							width: 48rpx;height: 48rpx;border-radius: 50%;
							&__img {
								width: 48rpx;height: 48rpx;border-radius: 50%;
							}
						}
						&__in {
							width: 32rpx;margin: 0 12rpx 0 24rpx;
							&__num {
								font-size: 28rpx;color: #000000;
							}
						}
						&__right {
							width: 48rpx;height: 48rpx;border-radius: 50%;
							&__img {
								width: 48rpx;height: 48rpx;border-radius: 50%;
							}
						}
					}
				}
			}
		}
	}
	.text-blue {
		background-color: #FFFFFF;
		border-left: 9rpx solid #007AFF;
	}
	
	.text-grey {
		border-left: 9rpx solid rgba(248,248,248,1);
	}
	.bottom {
		width: 440rpx;height: 96rpx;display: flex;align-items: center;border-radius: 48rpx;overflow: hidden;;position: absolute;bottom: 159rpx;right: 42rpx;
		&__left {
			width: 274rpx;height: 100%;background-color: rgba(90,174,114,1);display: flex;align-items: center;justify-content: center; 
			&__text {
				font-size: 32rpx;color: #FFFFFF;
			}
		}
		&__right {
			flex: 1;height: 100%;font-size: 32rpx;color: #FFFFFF;background-color: rgba(230,157,55,1);display: flex;align-items: center;justify-content: center;position: relative;
			&__text {
				font-size: 24rpx;width: 38rpx;height: 38rpx;border-radius: 50%;background-color: #e12;color: #FFFFFF;display: flex;align-items: center;justify-content: center;position: absolute;top: 16rpx;right: 32rpx;
			}
		}
	}
	.order-tab {
		width: 100%;height: 89rpx;background-color: #FFFFFF;border-top: 2rpx solid rgba(248,248,248,1);display: flex;flex-direction: row;align-items: center;justify-content: center;position: fixed;top: 0;z-index: 99;
		&__box {
			width: 25%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
			&__text {
				font-size: 32rpx;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;
			}
			&__logo {
				width: 116rpx;height: 8rpx;border-radius: 4rpx;
			}
		}
	}
	.scroll-order {
		flex: 1;
		margin-top: 100rpx;
		height:calc(100vh - 247rpx);
		background-color: #FFFFFF;
		&__box {
			width: 100%;
			&__content {
				width: 100%;padding: 0 5%;margin-top: 28rpx;border-bottom: 18rpx solid rgba(248,248,248,1);
				&__time {
					width: 90%;font-size: 26rpx;padding: 30rpx 0 32rpx 0;border-bottom: 1rpx solid rgba(248,248,248,1);display: flex;align-items: center;justify-content: space-between;
				}
				&__status {
					position: relative;right: 42rpx;
				}
				&__info {
					margin-top: 30rpx;width: 90%;border-bottom: 1rpx solid rgba(248,248,248,1);height: 250rpx;background-color: #fefefe;display: flex;align-items: center;flex-wrap: wrap;overflow: hidden;
					&__img {
						width: 200rpx;height: 250rpx;margin-left: 12rpx;position: relative;
						&__logo {
							width: 100%;height: 200rpx;
						}
						&__title {
							width: 100%;height: 30rpx;font-size: 22rpx;text-align: center;
						}
					}
					&__name {
						margin-left: 82rpx;flex: 1;height: 100%;display: flex;flex-direction: column;justify-content: space-around;
						&__box {
							width: 100%;display: flex;align-items: center;justify-content: space-between;
							&__title {
								font-size: 34rpx;font-weight: 700;color: #000000;
							}
						}
						&__text {
							display: flex;
							&__info {
								margin-left: 8rpx;font-size: 20rpx;color: rgba(153,153,153,1);display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
							}
						}
					}
				}
				&__zong {
					width: 90%;height: 76rpx;position: relative;
					&__box {
						position: absolute;top: 12rpx;right: 6rpx;
						&__title {
							font-size: 24rpx;color: rgba(102,102,102,1);margin-right: 8rpx;
						}
						&__text {
							font-size: 24rpx;color: rgba(102,102,102,1);
						}
					}
				}
				&__resver {
					width: 90%;height: 126rpx;position: relative;
					&__text {
						font-size: 30rpx;width: 200rpx;height: 66rpx;background-color: #e60000;color: #FFFFFF;border-radius: 33rpx;display: flex;align-items: center;justify-content: center;position: absolute;top: 28rpx;right: 6rpx;
					}
					&__title {
						font-size: 30rpx;width: 200rpx;height: 66rpx;background-color: #007AFF;color: #FFFFFF;border-radius: 33rpx;display: flex;align-items: center;justify-content: center;position: absolute;top: 28rpx;
					}
				}
			}
			&__no {
				width: 100%;height: 46rpx;display: flex;align-items: center;justify-content: center;color: #999999;position: fixed;top: 46%;
			}
		}
	}
	.up-order-box {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__content {
			width: 560rpx;height: 264rpx;border: 2rpx solid rgba(0,0,0,0.04);background-color: #FFFFFF;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				font-size: 28rpx;height: 182rpx;font-weight: 700;display: flex;align-items: center;justify-content: center;
			}
			&__button {
				width: 100%;height: 82rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
	.unorder-box {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__content {
			width: 560rpx;height: 448rpx;border: 2rpx solid rgba(0,0,0,0.04);background-color: #FFFFFF;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				font-size: 28rpx;height: 88rpx;font-weight: 700;display: flex;align-items: center;justify-content: center;
			}
			&__text {
				margin-left: 30rpx;font-size: 24rpx;color: rgba(102,102,102,1);font-weight: 700;
			}
			&__area {
				padding: 30rpx; height: 184rpx;
				&__text {
					padding: 30rpx;font-size: 28rpx;border: 2rpx solid rgba(0,0,0,0.04);width: 87.4%;height: 64.4%;background-color: rgba(248,248,248,1);
				}
			}
			&__button {
				width: 100%;height: 82rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
	.color-bule {
		color: rgba(49,114,182,1);
	}
	.color-green {
		color: rgba(78, 235, 115, 1);
	}
	.color-red {
		color: rgba(234, 0, 0, 1);
	}
</style>
